<template>
  <view class="container">

<!--    添加头像-->

    <view class="form-item">
      <view class="form-label">人员姓名</view>
      <input type="text" placeholder="请输入" v-model="person.username" />
    </view>
    <view class="form-item">
      <view class="form-label">手机号</view>
      <input type="text" placeholder="请输入" v-model="person.mobile" />
    </view>

    <u-form-item
        required
        :label-width="150"
        :border-bottom="false"
        prop="person.agentLogo"
        label="店员头像"
    >
      <div>
        <u-upload
            :file-list="storeLogoFileList"
            :header="{ accessToken: storage.getAccessToken() }"
            :action="action"
            width="200"
            @on-uploaded="onUploaded($event, 'agentLogo')"
            :max-count="1"
            :show-progress="false"
        ></u-upload>
      </div>
    </u-form-item>

    <view class="form-item">
      <view class="form-label">从业年限</view>
      <navigator url="#" @click="selectWorkingYears">
        <view class="form-value">{{ person.workingYear ? person.workingYear : '请选择' }}</view>
      </navigator>
    </view>
    <view class="form-item">
      <view class="form-label">分销员等级</view>
      <navigator url="#" @click="selectAgentLevel">
        <view class="form-value">{{ person.agentLevel ? person.agentLevel : '请选择' }}</view>
      </navigator>
    </view>
    <view class="form-item">
      <view class="form-label">服务人数</view>
      <input type="number" placeholder="请输入" v-model="person.serviceCount" />
    </view>
    <view class="form-item">
      <view class="form-label">所属店铺</view>
      <view class="form-value">{{person.storeName}}</view>
    </view>
    <view class="form-item">
      <view class="form-label">所属公司</view>
      <view class="form-value">自动填写</view>
    </view>
    <view class="form-item">
      <view class="form-label">主营小区</view>
      <textarea placeholder="请输入主营小区名称" v-model="person.mainCommunity"></textarea>
    </view>
    <button class="save-button" @click="savePersonInfo">保存</button>
  </view>
</template>

<script>
import {addClerk,updateClerk,getClerkDetail} from  "@/api/store";
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
export default {
  data() {
    return {
      storage,
      action: upload, //图片上传数据
      storeLogoFileList: [],
      person: {
        username: '',
        mobile: '',
        workingYear: '',
        agentLevel: '',
        serviceCount: '',
        mainCommunity: '',
        storeName:'',
        agentLogo:''
      },
      workingYearsOptions: ['1年以下', '1 - 3年', '3 - 5年', '5年以上'],
      agentLevelOptions: ['初级', '中级', '高级'],
      optionId:  '',
    };
  },
  onLoad(options) {
   if(undefined!=options.id && options.id!=''){
     this.optionId = options.id;
       getClerkDetail(options.id).then(res=>{
         if(res.data.code==200){
               this.person=res.data.result
               this.storeLogoFileList.push({
                 url: res.data.result.agentLogo
               })

               this.person.username=res.data.result.clerkName

         }
       })
   }
  },
  methods: {
    // 图片上传
    onUploaded(lists, key) {
      // let images = [];
      // lists.forEach((item) => {
      //   images.push(item.response.result);
      // });
      this.person.agentLogo = lists[0].response.result;
             },
    selectWorkingYears() {
      uni.showActionSheet({
        itemList: this.workingYearsOptions,
        success: (res) => {
          this.person.workingYear = this.workingYearsOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    selectAgentLevel() {
      uni.showActionSheet({
        itemList: this.agentLevelOptions,
        success: (res) => {
          this.person.agentLevel = this.agentLevelOptions[res.tapIndex];
        },
        fail: (err) => {
          console.log(err);
        }
      });
    },
    async savePersonInfo() {
      // 这里可以添加保存人员信息的逻辑
      console.log('保存的人员信息：', this.person);
      if(this.optionId==''){
        const res = await addClerk(this.person);
        if(res.data.code==200){
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });

          //延时一秒  执行
          setTimeout(() => {
            ///pages/manage/renManage
            uni.navigateTo({
              url: '/pages/manage/renManage'
            });
          }, 1000);
        }else{
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          });

        }
      }else{

        const res = await updateClerk(this.person);
        if(res.data.code==200){
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          });

          //延时一秒  执行
          setTimeout(() => {
            ///pages/manage/renManage
            uni.navigateTo({
              url: '/pages/manage/renManage'
            });
          }, 1000);
        }else{
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          });

        }
      }




    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #eee;
}
.form-label {
  width: 30%;
  color: #333;
}
.form-value {
  flex: 1;
  color: #666;
}
input,
textarea {
  width: 70%;
  border: none;
}
.save-button {
  background-color: red;
  color: white;
  padding: 10rpx;
  text-align: center;
  border-radius: 5rpx;
}
</style>